<template>
  <section class="todoapp">
    <todo-footer></todo-footer>
    <todo-header @add="handelAdd"></todo-header>
    <todo-main :list="list" @del="handleDel"></todo-main>

    <!-- This section should be hidden by default and shown when there are todos -->

    <!-- This footer should be hidden by default and shown when there are todos -->
  </section>
</template>

<script>
import TodoFooter from "./components/TodoFooter.vue";
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
export default {
  components: { TodoFooter, TodoHeader, TodoMain },
  data() {
    return {
      list: [
        { id: 12, name: "吃饭", isDone: false },
        { id: 14, name: "听歌", isDone: true },
        { id: 23, name: "洗澡", isDone: true },
        { id: 34, name: "睡觉", isDone: false },
        { id: 35, name: "游戏", isDone: false },
      ],
    };
  },
  methods: {
  handleDel(id) {
    // console.log(id)
    this.list = this.list.filter(item => item.id !== id)
  },
  handelAdd(todo){
    this.list.unshift({id:Date.now(),name:todo,isDone:false})
  }
}
};
</script>

<style></style>
